<template>
  <a-modal :title="title" :visible="visible" @cancel="handleCancel" :width="1200" @ok="handleOk">
    <a-table
      v-if="dataSource != [] && !isTabTable"
      :columns="columns"
      :data-source="dataSource"
      rowKey="id"
      :pagination="false"
      :loading="loading"
      class="antableClass"
      :scroll="{ y: 500 }"
    >
    </a-table>
    <a-tabs type="card" @change="handleChange">
      <a-tab-pane :key="tab.tabKey" :tab="`${tab.type == 1 ? '主' : '附'}-${tab.title}`" v-for="tab in tabDatas">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          rowKey="fieldEnName"
          :pagination="false"
          :loading="loading"
          class="antableClass"
          :scroll="{ y: 500 }"
          :row-selection="rowSelection"
        >
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { columns3, columns4 } from '../columns'
export default {
  name: 'CheckOrganModal',
  mixins: [JeecgListMixin],
  props: {
    urlList: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      url: {
        list: ''
      },
      queryParam: {},
      disableMixinCreated: true,
      title: '',
      tabDatas: [],
      isTabTable: false,
      columns: [],
      tabSelectedRowKeys: {},
      tabKeys: ''
    }
  },
  computed: {
    rowSelection() {
      console.log(
        this.tabSelectedRowKeys[this.tabKeys] ? this.tabSelectedRowKeys[this.tabKeys].selectedRowKeys : [],
        '1231231'
      )
      return {
        type: 'radio',
        selectedRowKeys: this.tabSelectedRowKeys[this.tabKeys]
          ? this.tabSelectedRowKeys[this.tabKeys].selectedRowKeys
          : [],
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(selectedRowKeys)
          selectedRows[0].tabkey = this.tabKeys
          this.tabSelectedRowKeys[this.tabKeys] = {
            selectedRowKeys,
            selectedRows: {
              ...selectedRows
            }
          }
        }
      }
    }
  },
  methods: {
    show(queryParam, title) {
      this.visible = true
      this.title = title
      this.url.list = this.urlList
      this.columns = columns3()
      this.queryParam = { ...queryParam }
      this.loadData(1)
    },
    showTabsTable(data, title, relate) {
      this.isTabTable = true
      this.title = title
      this.url.list = this.urlList
      this.tabDatas = data.map(item => {
        return {
          ...item,
          tabKey: item.tableName ? `${item.tableName}-${item.type}` : item.type
        }
      })
      
      // this.tabSelectedRowKeys
      //  设置关联key 值
      data.map(item => {
        let b = item.tableName ? `${item.tableName}-${item.type}` : item.type
        // 回显有问题妈蛋
        let result = relate.find(o => {
          let tabkey = o.tabkey === b
          if (tabkey && o.tabkey === b) return true
          else if (!tabkey && o.type) {
            let c = o.tableName ? `${o.tableName}-${o.type}` : o.type
            return c === b
          }
          return false
        })
        console.log(result)
        if (result) {
          this.$set(this.tabSelectedRowKeys, b, {
            selectedRowKeys: [(result.key && result.key[0]) || result.linkField],
            selectedRows: [
              {
                sourceTableName: result.tableName,
                fieldEnName: result.linkField
              }
            ],
            type: item.type
          })
        } else {
          this.$set(this.tabSelectedRowKeys, b, {
            selectedRowKeys: [],
            selectedRows: [],
            type: item.type
          })
        }
      })

      console.log(this.tabSelectedRowKeys)
      this.columns = columns4()
      this.queryParam = { tableName: this.tabDatas[0].tableName }
      this.tabKeys = this.tabDatas[0].tabKey

      this.loadData(1)
      this.visible = true
    },
    handleCancel() {
      this.tabDatas = []
      this.dataSource = []
      this.title = ''
      this.isTabTable = false
      this.visible = false
    },
    handleChange(key) {
      this.tabKeys = key
      let paramsKey = this.tabDatas.find(item => item.tabKey === key)
      this.queryParam = { tableName: paramsKey.tableName }
      this.dataSource = []
      this.loadData(1)
    },
    handleOk() {
      let relate = []
      for (const key in this.tabSelectedRowKeys) {
        if (Object.hasOwnProperty.call(this.tabSelectedRowKeys, key)) {
          const item = this.tabSelectedRowKeys[key]
          relate.push({
            tableName: item.selectedRows[0] ? item.selectedRows[0].sourceTableName : '',
            linkField: item.selectedRows[0] ? item.selectedRows[0].fieldEnName : '',
            tabkey: key,
            key: [...item.selectedRowKeys],
            type: item.type
          })
        }
      }
      console.log(relate)
      this.$emit('Ok', relate)
      this.handleCancel()
    }
  }
}
</script>

<style lang="less" scoped>
// @import '~@assets/less/tableTheme.less';
@import '~@assets/less/common.less';
.ant-table-fixed-left .ant-table-thead > tr > th:last-child {
  border-top-right-radius: 0;
  background-color: red;
  padding: 0;
}
</style>
